<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v-show="car">子给的车子：{{ car }}</h4>
    <h4 v-show="toy">子给的玩具：{{ toy }}</h4>
    <!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy" @send-car="car = $event" />
  </div>
</template>
  
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let car = ref('')
let toy = ref('')
// 用于保存传递过来的车子
function saveCar(value: string) {
  console.log('saveCar', value)
  car.value = value
}
// 用于保存传递过来的玩具
function saveToy(value: string) {
  console.log('saveToy', value)
  toy.value = value
}

/*
1. 概述：自定义事件常用于：**子 => 父。**
2. 注意区分好：原生事件、自定义事件。

- 原生事件：
  - 事件名是特定的（`click`、`mosueenter`等等）	
  - 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）
- 自定义事件：
  - 事件名是任意名称
  - <strong style="color:red">事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！</strong >
3. 示例：
<!--在父组件中，给子组件绑定自定义事件：-->
<Child @send-toy="toy = $event"/>

<!--注意区分原生事件与自定义事件中的$event-->
<button @click="toy = $event">测试</button>

//子组件中，触发事件：
this.$emit('send-toy', 具体数据)
*/
</script>
  
<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.father button {
  margin-right: 5px;
}
</style>